<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="请选择学院">
        <el-select v-model="a" placeholder="活动区域" clearable>
          <el-option
            v-for="(item, index) of searchlist"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <div>
        <el-table
          show-summary
          :data="li"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px"
          :height="tableheight"
        >
          <el-table-column prop="xueyuan" label="学院" width="180">
          </el-table-column>
          <el-table-column prop="jieduan" label="阶段"> </el-table-column>
          <el-table-column prop="daoyuan" label="导员"> </el-table-column>
          <el-table-column prop="class" label="所带班级"> </el-table-column>
          <el-table-column prop="sum" label="应谈话数量"> </el-table-column>
          <el-table-column prop="stu_talk" label="实谈话数量（学生）">
          </el-table-column>
          <el-table-column prop="stu_today_add" label="今日新增（学生）">
          </el-table-column>
          <el-table-column prop="par_talk" label="实谈话数量（家长）">
          </el-table-column>
          <el-table-column prop="par_today_add" label="今日新增（家长）">
          </el-table-column>
          <el-table-column prop="par_today_add" label="备注（重点写生）">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getjieduanbi } from "network/api/voice";
export default {
  data() {
    return {
      //search
      a: null,
      //初始数据
      c: [],
      //下拉列表
      searchlist: [],

      formInline: null,
      //后端获取数据
      data: [],
      li: [],
      obj: {},
      tableheight: 0,
    };
  },

  methods: {
    //搜索
    onSubmit() {
      if (this.a == "") {
        this.data = this.c;

        this.forList();
        this.b();
        return;
      }
      this.c.forEach((item) => {
        if (this.a == item.name) {
          this.data = [item];
          this.forList();
          this.b();
        }
      });
    },
    //合并
    mergeTableRow(config) {
      let data = config.data;
      const { mergeColNames, firstMergeColNames, firstMerge } = config;
      if (!mergeColNames || mergeColNames.length === 0) {
        return data;
      }
      mergeColNames.forEach((m) => {
        const mList = {};
        data = data.map((v, index) => {
          const rowVal = v[m];
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            const flag =
              firstMergeColNames.filter((f) => {
                return f === m;
              }).length !== 0;
            const mcFlag =
              mergeColNames.filter((mc) => {
                return mc === firstMerge;
              }).length === 0;
            if (
              (mcFlag && flag) ||
              (flag &&
                data[index][firstMerge + "-span"] &&
                data[index][firstMerge + "-span"].rowspan === 1)
            ) {
              v[m + "-span"] = {
                rowspan: 1,
                colspan: 1,
              };
            } else {
              data[mList[rowVal]["index"]][m + "-span"].rowspan++;
              v[m + "-span"] = {
                rowspan: 0,
                colspan: 0,
              };
              mList[rowVal]["num"]++;
              mList[rowVal]["newIndex"]++;
            }
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };
            v[m + "-span"] = {
              rowspan: 1,
              colspan: 1,
            };
          }
          return v;
        });
      });
      return data;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    // 循环搜索列表
    forsearch() {
      this.data.forEach((item) => {
        this.searchlist.push(item.name);
      });
    },
    // 合并函数
    b() {
      this.li = this.mergeTableRow({
        data: this.li,
        mergeColNames: ["xueyuan", "jieduan", "daoyuan", "class"], // 需要合并的列，默认合并列相同的数据
        firstMergeColNames: ["xueyuan", "jieduan", "daoyuan", "class"], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: "xueyuan", // 以哪列为基础进行合并，一般为第一列
      });
    },
    async getdata() {
      // const res = await this.http.get('http://101.34.188.212:8001/api/Recodings/aa')
      const res = await getjieduanbi();
      if (res.state == "no") {
        this.$message.error(res.msg)
        this.data = [];
      this.c = this.data;
      } else {
        this.data = res.data;
      this.forList();
      this.b();
      this.forsearch();
      }

      this.tableheight = "700px";
    },
    //数据处理
    forList() {
      let li = [];
      console.log(this.data, 5556);
      this.data.forEach((item) => {
        let obj = {
          xueyuan: "无学院",
          daoyuan: "无导员",
          class: "无班级",
          jieduan: "无阶段",
          stu_talk: 0,
          par_talk: 0,
          sum: 0,
          par_today_add: 0,
          stu_today_add: 0,
          focus: 0,
        };
        obj.xueyuan = item.name;
        let objxueyuan = JSON.parse(JSON.stringify(obj));
        if (item.children.length == 0) {
          li.push(JSON.parse(JSON.stringify(objxueyuan)));
          return;
        }
        item.children.forEach((item1) => {
          objxueyuan.jieduan = item1.name;
          let objjieduan = JSON.parse(JSON.stringify(objxueyuan));
          if (item1.children.length == 0) {
            li.push(JSON.parse(JSON.stringify(objjieduan)));
            return;
          }
          item1.children.forEach((item2) => {
            objjieduan.daoyuan = item2.counsellor;
            objjieduan.class = item2.class;
            // 班级没有人数呢?
            item2.children.forEach((item3) => {
              objjieduan.stu_talk = item3.stu_talk;
              objjieduan.par_talk = item3.par_talk;
              objjieduan.par_today_add = item3.par_today_add;
              objjieduan.stu_today_add = item3.stu_today_add;
              objjieduan.focus = item3.focus.length;
              objjieduan.sum = item3.sum;
            });
            // console.log(JSON.parse(JSON.stringify(obj)), 123);
            li.push(JSON.parse(JSON.stringify(objjieduan)));
          });
        });

        // obj = {
        //   xueyuan: "无学院",
        //   daoyuan: "无导员",
        //   class: "无班级",
        //   jieduan: "无阶段",
        //   stu_talk: 0,
        //   par_talk: 0,
        //   sum: 0,
        //   par_today_add: 0,
        //   stu_today_add: 0,
        //   focus: 0,
        // };
      });
      this.li = li;
    },
  },
  created() {
    this.getdata();
    this.c = this.data;
    this.forList();
    this.forsearch();
    this.b();
  },
};
</script>
